<template>
  <div class="search bx">
    <div class="search-title">
      <h3>搜索结果</h3>
      <a :class="{active:mark == 1}" href="javascript:;" @click="cutover(1)">单曲</a>
      <a :class="{active:mark == 2}" href="javascript:;" @click="cutover(2)">歌手</a>
      <a :class="{active:mark == 3}" href="javascript:;" @click="cutover(3)">专辑</a>
    </div>
    <el-button icon="el-icon-caret-right" class="all">播放全部</el-button>
    <Songs v-if="mark == 1"/>
    <Singer v-if="mark == 2"/>
    <Album v-if="mark == 3"/>
  </div>
</template>

<script>
import Songs from './Songs'
import Singer from './Singer'
import Album from './Album'

export default {
  name: 'Search',
  components: {
    Songs,
    Singer,
    Album
  },
  data() {
    return {
      mark: 1, // 用于切换显示的内容
    }
  },
  methods: {
    // 切换搜索的数据
    cutover(mark) {
      this.mark = mark
    },
  }
}
</script>

<style lang="less" scoped>
// 每行的颜色
/deep/ .el-table .success-row {
  background: #f7f7f7; //这里可以修改颜色
}

/deep/ .el-table::before {
  height: 0;
}

.search {
  margin-bottom: 40px;
}

.search-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .active {
    border-bottom: 2px solid #000;
  }

  h3 {
    font-size: 28px;
    margin-right: 10px;
  }

  a {
    display: inline-block;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    margin: 0 20px;
    transition: all .5s;
    border-bottom: 1px solid transparent;
  }
}

.all {
  background: #e61723;
  color: #fff;
  font-size: 15px;
  border-radius: 30px;
  border: 0;
  margin-bottom: 20px;
}
</style>
